<template>
	<div class="page-info">
		<div class="search">
			<div class="search-box">
				<a-form
					:model="searchInfo"
					:label-col="labelCol"
					:wrapper-col="wrapperCol"
				>
					<a-row :gutter="24">
						<a-col :span="6">
							<a-form-item
								:name="labelMap['rootCode'].name"
								:label="labelMap['rootCode'].label"
							>
								<a-input
									style="width: 90%; margin-left: 8px"
									v-model:value="searchInfo.rootCode"
									:placeholder="'请填写' + labelMap['rootCode'].label"
									allow-clear
								/>
							</a-form-item>
						</a-col>
						<a-col :span="6">
							<a-form-item
								:name="labelMap['code'].name"
								:label="labelMap['code'].label"
							>
								<a-input
									style="width: 90%; margin-left: 8px"
									v-model:value="searchInfo.code"
									:placeholder="'请填写' + labelMap['code'].label"
									allow-clear
								/>
							</a-form-item>
						</a-col>
						<a-col style="text-align: right; margin-bottom: 20px">
							<a-space>
								<a-button type="primary" @click="query"> 查找</a-button>
								<a-button type="primary" @click="cancelQuery">清空</a-button>
							</a-space>
						</a-col>
					</a-row>
				</a-form>
			</div>
		</div>
		<div class="button" style="margin: 10px">
			<a-space>
				<!-- <a-button type="primary" @click="editUserProfileInfo('add')">新增</a-button> -->
				<a-button type="primary" @click="exportUserWaterInfo">导出</a-button>
			</a-space>
		</div>
		<div class="content">
			<a-table
				:dataSource="dataSource"
				:columns="columns"
				:loading="loading"
				:row-key="(record) => record.id"
				:pagination="pagination"
				@change="handleTableChange"
				:scroll="{ y: 420 }"
			>
				<template #bodyCell="{ column, record }">
					<template v-if="column.key === 'startTime'">
						{{ dayjs(record.startTime).format('YYYY-MM-DD') }}
					</template>
					<template v-else-if="column.key === 'endTime'">
						{{ dayjs(record.endTime).format('YYYY-MM-DD') }}
					</template>
					<template v-else-if="column.key === 'partnerType'">
						{{ getPartnerName(record.partnerType) }}
					</template>
					<template v-else-if="column.key === 'hiddenPhone'">
						<a-tag
							:key="record.hiddenPhone"
							:color="record.hiddenPhone ? '#87d068' : 'red'"
						>
							{{ record?.hiddenPhone ? '是' : '否' }}
						</a-tag>
					</template>
					<template v-else-if="column.key === 'source'">
						{{ getSourceName(record.source) }}
					</template>
					<template v-else-if="column.key === 'sumTotalAmount'">
						{{ record.sumTotalAmount ?? 0 }}
					</template>
				</template>
			</a-table>
		</div>
	</div>
</template>
<script setup lang="ts">
import { columns, getSourceName, pageInfo, pagination, SearchInfo } from './userIncomeInfoTs';
import { queryUserIncomeInfo } from '@/api/userInfo/userInfo/userInfoTs';
import { message } from 'ant-design-vue';
import { getPartnerName } from '@/utils/common';
import dayjs from 'dayjs';

const labelCol = ref({ span: 5 });
const wrapperCol = ref({ span: 19 });

const labelMap = ref<any>({
	code: { name: 'code', label: '被邀请人编码' },
	rootCode: { name: 'rootCode', label: '邀请人编码' },
});

let searchInfo = ref<SearchInfo>({});

let loading = ref<boolean>(false);

let dataSource = ref();

const queryUserReduceInfoInfo = (param: SearchInfo, cur: pageInfo): void => {
	loading.value = true;
	queryUserIncomeInfo(param, cur.current, cur.pageSize)
		.then((res) => {
			if (res.code == '200') {
				dataSource.value = res.data.records;
				pagination.value.current = res.data.current;
				pagination.value.pageSize = res.data.size;
				pagination.value.total = res.data.total;
			} else {
				message.error((res && res.message) || '查询列表失败！');
			}
		})
		.finally(() => {
			loading.value = false;
		});
};

const init = (): void => {
	//获取用户信息页面数据
	queryUserReduceInfoInfo(searchInfo.value, pagination.value);
};

const cancelQuery = (): void => {
	searchInfo.value = {};
};

const query = (): void => {
	queryUserReduceInfoInfo(searchInfo.value, pagination.value);
};

const handleTableChange = (pagination: any): void => {
	queryUserReduceInfoInfo(searchInfo.value, pagination);
};

// 导出流水信息
const exportUserWaterInfo = () => {
	// exportUserReduce(searchInfo.value, { responseType: 'blob' }) // 设置 responseType 为 'blob'
	// 	.then((response: any) => {
	// 		const blob = new Blob([response.data], {
	// 			type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
	// 		});
	// 		const url = window.URL.createObjectURL(blob);
	// 		const link = document.createElement('a');
	// 		link.href = url;
	// 		link.setAttribute('download', '会员名单.xlsx'); // 设置文件名
	// 		document.body.appendChild(link);
	// 		link.click();
	// 		document.body.removeChild(link);
	// 		window.URL.revokeObjectURL(url); // 释放内存
	// 	})
	// 	.catch((error: any) => {
	// 		console.error('Error exporting Excel:', error);
	// 	});
};

init();
</script>
<style lang="scss" scoped></style>
